<template>
  <div class="tableEEE" :style="{ 'padding-top': top }">
    <img v-if="!empty.status" src="@/assets/images/grey_de_normal.png" alt="" />
    <img v-else src="@/assets/images/grey_de_search.png" alt="" />
    <p style="line-height: normal" :style="{ color: color }">
      {{ empty.status ? emptySearch : emptyText }}
    </p>
  </div>
</template>

<script lang="ts" setup name="emptyTable">
import { ref, reactive } from 'vue';

defineProps({
  color: {
    type: String,
    default: '#333',
  },
  top: {
    type: String,
    default: '140px',
  },
  emptySearch: {
    type: String,
    default: '暂未搜索到相关内容',
  },
  emptyText: {
    type: String,
    default: '暂无内容',
  },
  // 是否在搜索接口后面
  empty: {
    type: Object,
    default: () => ({ status: false }),
  },
})

// 缺省图状态
const empty = reactive({
    status: false //false数据没有，true搜索没有
})
</script>

<style lang="less" scoped>
  .tableEEE {
  padding-bottom: 20px;
  text-align: center;
  img {
    width: 250px;
  }
  p {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}
</style>